import React from 'react'
import { Button, message } from 'antd'
import 'antd/dist/antd.css';

class CommentList extends React.Component {
    state = {
        commnts: []
    }
    // constructor(props){    正常写法，简写为上面的
    //     super(props)
    //     this.state = {
    //         commnts:[]
    //     }
    // }

    render() {
        return <CommentDetail commnts={this.state.commnts} />
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                commnts: ['我加1了', '我是第二个']
            })
        }, 2000);
    }
}


function CommentDetail({ commnts }) {
    return <ul>
        {commnts.map(v => {
            return <li>{v}</li>
        })}
    </ul>
}

// class CommentDetail extends React.Component {   上面是 CommentDetail 的简化写法
//     render() {
//         return <ul>
//             {this.props.commnts.map(v => {
//                 return <li>{v}</li>
//             })}
//         </ul>
//     }
// }

////////////////////////////////////////////////////////////////////////////////////////////////////////
class CountList extends React.Component{
    render(){
        return <h3>{this.props.num}</h3>
    }
}
class TitleList extends React.PureComponent{
    render(){
        return <h3>{this.props.title}</h3>
    }
}

// class TitleList extends React.Component{   上面PureComponent可分解为此段
//     shouldComponentUpdate(nextProps){
//         return nextProps.title != this.props.title
//     }
//     render(){
//         return <h3>{this.props.title}</h3>
//     }
// }

// 函数式实现 不会重复渲染
const NameList = React.memo(props=>{
   return <div>{props.name || 'null'}</div>
})



class App2 extends React.Component {
    // PureComponent就是
    // shouldComponentUpdate(nextProps,nextState){
    //     // 如果nextProps的内容等于this.props，nextState等于this.state  比较一层
    //     return false
    // }
    state={
        count:0,
        name:'笑笑',
        title:'ABC提示'
    }
    componentDidMount(){
        setInterval(() => {
            this.setState({
                count:this.state.count+1
            })
        }, 1000);
    }


    info = () => {
        message.info('这是提示')
    }
    render() {
        return <div className="App">
            <Button type="primary" onClick={this.info}>提交</Button>
            <CommentList />
            <TitleList title={this.state.title}/>      
            <CountList num={this.state.count}/>
            <NameList name={this.state.name}/>
        </div>
    }
}

export default App2